<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1024" :mask-closable="false">
      <Scroll :height="height">
      <div style="width: 90%;margin: 10px auto;">
        <div style="background-color: rgba(139,139,139,0.6); font-size: 18px;font-family: '宋体';">
          <div style="width: 95%;background-color: #ffffff;margin: 0 auto;">
            <div class="paperStyle" id="page_design">
              <div style="margin: 42px 36px;line-height: 24px;font-family: 'fangsong';font-size:18px;color: #000;">
                <Row class="text-content">
                  <div style="text-align: center;font-family: '微软雅黑'"><h3>项目设计要求说明书</h3></div>
                  <div style="height: 16px;"></div>
                  <div>致设计公司：</div>
                  <div style="height: 16px;"></div>
                  <p>“{{ data.project_name }}”项目已经现场勘测完毕，初步规划如下，请据此做出工程设计文档及图纸：</p>
                  <p><b>一、“{{ data.project_name }}”项目的设计要求说明如下：</b></p>
                  <p>{{ data.design_content }}</p>
                  <p><b>二、所使用到的杆塔明细如下：</b></p>
                  <div style="width:98%; margin: 10px auto;">
                    <table class="gridtable">
                      <tr>
                        <th>序号</th>
                        <th>杆号</th>
                        <th>名称</th>
                        <th>杆型</th>
                      </tr>
                      <tr v-for="(item,index) in data.pole_detail" :key="index">
                        <td style="text-align: center">{{index + 1}}</td>
                        <td style="text-align: center">{{item.pole_name}}</td>
                        <td>{{item.typical_name}}</td>
                        <td>{{item.pole_type}}</td>
                      </tr>
                    </table>
                  </div>
                  <p><b>三、物料表如下：</b></p>
                  <div style="width:98%; margin: 5px auto;">
                    <table class="gridtable">
                      <tr>
                        <th>序号</th>
                        <th>类型</th>
                        <th>物料编码</th>
                        <th>物料名称</th>
                        <th>规格型号</th>
                        <th>单位</th>
                        <th>数量</th>
                      </tr>
                      <tr v-for="(item,index) in data.materials" :key="index">
                        <td style="text-align: center">{{index + 1}}</td>
                        <td style="text-align: center">{{item.type}}</td>
                        <td style="text-align: center">{{item.code}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.stype}}</td>
                        <td style="text-align: center">{{item.unit}}</td>
                        <td style="text-align: center">{{item.count}}</td>
                      </tr>
                    </table>
                  </div>
                  <p><b>四、附线路走径图</b></p>
                  <div style="height: 40px;"></div>
                  <div style="margin-left: 200px;">{{company}}{{data.organization_name}}</div>
                  <div style="margin-left: 250px;">打印日期：{{print_date}}</div>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">确定</Button>
        <Button type="primary" @click="print" icon="ios-print-outline">打印</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getStore } from '@/libs/storage';
import moment from 'moment';
import printJS from 'print-js';
export default {
  name: 'view-design-content',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array
    },
    projectParams: Object
  },
  data() {
    return {
      visible: this.value,
      title: "查看项目设计说明书",
      height: 540,
      submitLoading: false,
      company: '',
      print_date: '',
    }
  },
  methods: {
    init() {
      const userInfo = JSON.parse(getStore('userInfo'));
      this.company = userInfo.compamy;
      this.print_date = moment(new Date()).format('YYYY年MM月DD日');
    },
    handleCancel() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    print() {
      let options = {
        printable: 'page_design',
        type: 'html',
        scanStyles: false,
        style:`
.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
        `
      };
      printJS(options);
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  computed: {
    
  },
  mounted() {
    this.init();
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
.text-content{
  margin: 46px 46px;
}
.text-content p{
  text-indent: 36px;
  font-size: 18px;
}
.paperStyle {
  border: solid 1px #bdbdbd;
  margin: 24px auto;
}
</style>